<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null" @add="onAdd" showAddBtn
            :query-props="{isSimple: false, simpleAble: true}"
            toolbar selected-able primary-field="id"
  >
    <template v-slot:actionAppend>
      <el-button type="danger" icon="el-icon-delete" size="small" @click="onBatchDelete">批量删除</el-button>
    </template>
    <template v-slot:form>
      <el-form-item>
        <el-input v-model="model.label" placeholder="字典代码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="model.type" placeholder="字典类别代码" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="model.typeCn" placeholder="字典类别名称" clearable></el-input>
      </el-form-item>
    </template>

    <template v-slot:ctrl="{row}">
      <el-button type="text" icon="el-icon-edit" @click="onEdit(row)">编辑</el-button>
      <el-button type="text" icon="el-icon-remove" class="btn-danger" @click="onDelete(row)">删除</el-button>
    </template>
  </sys-page>
</template>

<script>
import edit from '@/components/modules/dictionary/edit'
import {postSysSysdictionaryList, postSysSysdictionaryDelete} from '$my/code/api/sys-dictionary'

function getColumns() {
  return [
    {type: 'selection', align: 'center'},
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'value', label: '字典代码', align: 'center', minWidth: 100, showOverflowTooltip: true, display: true},
    {prop: 'label', label: '字典名称', align: 'center', minWidth: 120, showOverflowTooltip: false, display: true},
    {prop: 'type', label: '字典类别代码', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'typeCn', label: '字典类别名称', align: 'center', minWidth: 150, showOverflowTooltip: true, display: true},
    {prop: 'ctrl', label: '操作', width: '180px', fixed: 'right', align: 'center'}
  ]
}

export default {
  name: 'dictionary',
  data() {
    return {
      model: {
        label: '',
        type: '',
        typeCn: ''
      },
      columns: getColumns()
    }
  },
  methods: {
    async loader(model) {
      const data = await postSysSysdictionaryList(model)

      return data
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增字典',
        comp: edit
      })
    },
    onEdit(row) {
      console.info('row:', row)
      this.$refs.page.setDialog({
        title: '编辑字典',
        comp: edit,
        props: {
          id: row.id
        }
      })
    },
    onBatchDelete() {
      const shopList = this.$refs.page.shopList
      if(shopList.length === 0) {
        this.$message.warning('请先勾选数据！')
        return
      }
      const ids = shopList.map(o => o.id)
      this.doDelete(ids)
    },
    onDelete(row) {
      this.doDelete([row.id])
    },
    doDelete(ids) {
      this.$confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postSysSysdictionaryDelete(ids).then(_ => {
          this.$notify.success('操作成功!')
          this.$refs.page.shopList = []
          this.$refs.page.reload()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dictionary {
}
</style>
